<template>
  <div>
    <div class="title font14 ma30-15">
      <p>基本信息</p>
    </div>
    <!-- 基本信息 -->
    <div class="pa15 bor7 details">
      <div class="clearfix">
        <div class="fr details-but">
          <el-button type="primary">返回</el-button>
          </div>
      </div>
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm mt20">
        <el-form-item label="活动标题" prop="name" class="font12" required>
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="举办时间" required class="wid50 font12">
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-date-picker type="date" v-model="ruleForm.date2" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="活动地址" required class="font12">
          <el-col :span="4">
            <el-form-item prop="region">
              <el-select v-model="ruleForm.region" placeholder="中国">
                <el-option label="美国" value="meiguo"></el-option>
                <el-option label="韩国" value="hanguo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item prop="add">
              <el-input v-model="ruleForm.add"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="活动海报" prop="img" class="font12" required>
          <img src="../../img/2.jpg" alt />
        </el-form-item>

        <el-form-item label="活动类型" required class="wid50 font12">
          <el-form-item prop="region2">
            <el-select v-model="ruleForm.region2" placeholder="户外旅游">
              <el-option label="室内活动" value="meiguo"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="活动人数" required class="wid50 font12" prop="number">
          <el-input v-model="ruleForm.number"></el-input>
        </el-form-item>
        <el-form-item label="活动发起人" class="font12 wid50" required>
          <span>Demo account</span>
        </el-form-item>
        <!-- 判断是否有团队 -->
        <!-- 没有团队 -->
        <!-- <el-form-item label="活动发起人" class="font12 wid50" required>
          <span>暂无团队，</span>
          <el-button type="text">去创建一个？</el-button>
        </el-form-item>-->
        <!-- end -->
        <!-- 有团队 -->
        <el-form-item label="活动发起人" class="font12 wid50" required>
          <el-form-item prop="region3">
            <el-select v-model="ruleForm.region3" placeholder="户外旅游">
              <el-option label="Adobe" value="Adobe"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <!-- end -->
      </el-form>
    </div>
    <div class="title font14 ma30-15">
      <p>参加会员</p>
    </div>
    <!-- 基本信息 -->
    <div class="pa15 bor7 details-fix">
      <div>
        <el-button type="primary">群发消息</el-button>
        <el-button type="success">导出会员</el-button>
      </div>

      <div class="details-fix-duv mt20">
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div>
                <img src="../../img/1.jpg" alt />
              </div>
              <p class="font12">Jason</p>
              <p class="font12">活动发起人</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--  -->
    <div class="title font14 ma30-15">
      <p>活动内容</p>
    </div>
    <!-- 活动内容 -->
    <div class="pa15 bor7 details-fng">
      <div class="quill-box">
        <template>
          <quill-editor v-model="content" :options="editorOption" ref="content"></quill-editor>
        </template>
      </div>
        <div class="ta mt20">
          <el-button type="primary" class="baocun">保存活动信息</el-button>
        </div>
    </div>
  </div>
</template>



<style scoped>
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.details {
}

.el-form-item__label {
}
.details .demo-ruleForm > div label {
  text-align: left;
  font-size: 0.75rem;
}
.details .line {
  text-align: center;
}
.el-select {
  width: 100%;
}
.details .el-col-20 {
  width: 82.33333%;
  margin-left: 1%;
}
.wid50 {
  width: 50%;
}
.details-fix .el-button {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
.details-fix .el-button--success {
  background: #19a15f;
}
.el-form-item > label {
  text-align: left !important;
}
.details .font12 label {
  text-align: left;
  font-size: 0.75rem;
}
.details-fix-duv .bg-purple {
  border: 1px solid #d8d8d8;
  text-align: center;
  color: #b2b2b2;
  padding: 3rem 0;
}
.details-fix-duv .bg-purple:hover {
  border-color: #4285f4;
}
.details-fix-duv .el-col-5 {
  width: 20%;
  margin-bottom: 1.25rem;
}
.details-fix-duv .bg-purple p:nth-of-type(1) {
  color: #545556;
  margin: 1.25rem 0 0.625rem;
}
.details-fix-duv .bg-purple img {
  width: 6.375rem;
  object-fit: cover;
}
.quill-box .quill-editor {
  overflow: hidden;
  font-style: initial;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 100% !important;
  position: relative;
  /* min-height: 14.0625rem;
  font-style: initial; */
}
.ql-editor {
}
.details-but .el-button{
  padding: .75rem 2rem;
}

</style>

<script>
import { quillEditor, Quill } from "vue-quill-editor";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ["link", "image"],
  ["clean"],
  [{ size: ["small", false, "large", "huge"] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ font: [] }]
];

export default {
  data() {
    return {
      content: `<h1>张三</h1>`,
      editorOption: {},
      ruleForm: {
        name: "我是IT人沙龙第十期：智能产业服务时代的新十年",
        date1: "",
        date2: "",
        region: "中国",
        region2: "户外旅游",
        add: "",
        number: "100",
        region3: "Adobe"
      },
      rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
          region: [
            { required: true, message: '活动地址', trigger: 'change' }
          ],
          add: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
           region2: [
            { required: true, message: '活动类型', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          region3: [
            { required: true, message: '请选择活动发起人', trigger: 'change' }
          ],
        },



      methods: {
        onEditorReady(editor) {
          // 准备编辑器
        },
        onEditorBlur() {}, // 失去焦点事件
        onEditorFocus() {}, // 获得焦点事件
        onEditorChange() {} // 内容改变事件

      },
      editorOption: {
        placeholder: "内容编辑",
        modules: {
          toolbar: {
            container: toolbarOptions
            // ...
          }
        }
      }
    };
  },
  components: {
    "quill-editor": quillEditor
  }
};
</script>
